<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加合同</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="content_box">
            <div class="cell_box" style="width:32.82vw;height: 348px;">
                <div class="cell_title">
                    <div class="cell_name">基本信息:</div>
                    <div class="cell_but"></div>
                </div>
                <div class="cell_cont">
                    <div class="form_box" style="margin-top: 0;">
                        <div class="form_name">采购合同编号</div>
                        <div class="form_cont" style="color:#FA7355;">保存后自动生成</div>
                    </div>
                    <div class="form_box">
                        <div class="form_name must_input">供应商</div>
                        <div class="form_cont" style="padding-right: 10px;">
                            <el-tooltip class="item" effect="dark" :disabled="!basicinfo.suppilerName"
                                :content="basicinfo.suppilerName" placement="top">
                                <el-select class="public_input" v-model="basicinfo.suppilerId" placeholder="请选择供应商">
                                    <el-option v-for="item in gysList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-tooltip>

                        </div>
                        <div class="form_but">
                            <el-button @click="addGys" class="border_but" type="primary">添加供应商</el-button>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name must_input">采购合同标题</div>
                        <div class="form_cont" style="padding-right: 114px;">
                            <el-tooltip class="item" effect="dark" :disabled="!basicinfo.title"
                                :content="basicinfo.title" placement="top">
                                <el-input class="public_input" placeholder="请输入内容" v-model="basicinfo.title" clearable>
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name">备注</div>
                        <div class="form_cont" style="padding-right: 114px;">
                            <el-tooltip class="item" effect="dark" :disabled="!basicinfo.remark"
                                :content="basicinfo.remark" placement="top">
                                <el-input type="textarea" :rows="3" placeholder="请输入" v-model="basicinfo.remark"
                                    clearable></el-input>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell_box" style="width: 41.99vw;margin-left: 1.71vw;height: 348px;">
                <div class="cell_title">
                    <div class="cell_name">附件:</div>
                    <div class="cell_but">
                        <el-upload class="upload-demo" action="##" :show-file-list="false" :http-request="httprequest"
                            multiple>
                            <el-button class="border_but" type="primary">上传附件</el-button>
                        </el-upload>
                    </div>
                </div>
                <div class="cell_cont">
                    <div class="table_box border_table_box">
                        <el-table :data="fileList" height="100%" border style="width: 100%">

                            <el-table-column prop="filename" align="center" show-overflow-tooltip label="名称">
                            </el-table-column>

                            <el-table-column prop="userName" align="center" show-overflow-tooltip label="上传人"
                                width="120">
                            </el-table-column>

                            <el-table-column prop="uploadTime" align="center" show-overflow-tooltip label="上传时间"
                                width="160">
                            </el-table-column>

                            <el-table-column align="center" show-overflow-tooltip label="操作" width="140">
                                <template slot-scope="scope">
                                    <el-button @click="prevewImg(scope.row.filename, scope.row.fileurl)" type="text">查看
                                    </el-button>
                                    <el-button @click="downImg(scope.row.filename, scope.row.fileurl)" type="text">下载
                                    </el-button>
                                    <el-button @click="removeImg(fileList, scope.$index)" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="cell_box" style="width: 100%;height: calc(100% - 348px);min-height: 366px;padding-top: 2.06vh;">
                <div class="cell_title">
                    <div class="cell_name">设备明细:</div>
                    <div class="cell_but">
                        <el-button class="border_but" @click="chioceClmx" type="primary">新增</el-button>
                    </div>
                </div>
                <div class="cell_cont">
                    <div class="table_box border_table_box">
                        <el-table :summary-method="getSummaries" ref="clmxTableRef" show-summary :data="clmxList"
                            height="100%" border style="width: 100%">

                            <el-table-column prop="deviceName" align="center" min-width="100" show-overflow-tooltip
                                label="设备名称"></el-table-column>

                            <el-table-column prop="deviceModel" align="center" show-overflow-tooltip label="规格型号"
                                min-width="70">
                            </el-table-column>

                            <el-table-column prop="deviceUnit" align="center" show-overflow-tooltip label="单位"
                                min-width="70">
                            </el-table-column>

                            <el-table-column prop="addTimeStock" align="center" show-overflow-tooltip label="账存数量"
                                min-width="94">
                            </el-table-column>

                            <el-table-column prop="quantity" align="center" show-overflow-tooltip label="采购数量"
                                min-width="160">
                                <template slot-scope="scope">
                                    <div class="table_nums">
                                        <el-input-number @change="countchange(scope.row)" v-model="scope.row.quantity"
                                            type="number" :min="1" label="描述文字">
                                        </el-input-number>
                                    </div>
                                </template>
                            </el-table-column>


                            <el-table-column prop="price" align="center" show-overflow-tooltip label="采购单价(元)"
                                min-width="158">
                                <template slot-scope="scope">
                                    <div class="table_input">
                                        <el-input @change="countchange(scope.row)" :min="0" placeholder="请输入内容"
                                            type="number" v-model="scope.row.price" clearable></el-input>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="taxRate" align="center" show-overflow-tooltip label="税率(%)"
                                min-width="158">
                                <template slot-scope="scope">
                                    <div class="table_input">
                                        <el-input @change="countchange(scope.row)" :min="0" :max="20"
                                            placeholder="请输入内容" type="number" v-model="scope.row.taxRate" clearable>
                                        </el-input>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="netwr" align="center" show-overflow-tooltip label="不含税金额(元)"
                                min-width="120">
                            </el-table-column>

                            <el-table-column prop="taxes" align="center" show-overflow-tooltip label="税金(元)"
                                min-width="80">
                            </el-table-column>

                            <el-table-column prop="priceTax" align="center" show-overflow-tooltip label="价税合计(元)"
                                min-width="112">
                            </el-table-column>

                            <el-table-column align="center" show-overflow-tooltip label="操作" width="106">
                                <template slot-scope="scope">
                                    <el-button @click="removeImg(clmxList, scope.$index, 1)" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <div class="but_box">
            <el-button @click="cancels" class="cancelClass">取消</el-button>
            <el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
        </div>
        <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
            <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
        </ul>
    </div>
    <script src="../js/FileSaver.js"></script>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    baseUrl: '',
                    // baseUrl: 'http://47.114.160.61:8050',
                    showApp: false,
                    previewList: [],
                    input: '',
                    basicinfo: {
                        title: '',
                        suppilerId: '',
                        suppilerName: '',
                        remark: ''
                    },
                    gysList: [],
                    fileList: [],
                    clmxList: [],
                    netwrcont: 0,
                    taxescont: 0,
                    priceTaxcont: 0,
                    companyId: ''
                };
            },
            methods: {
                addGys() {
                    var that = this
                    parent.layer.open({
                        type: 2,
                        title: '添加供应商',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['50.1%', '64.25%'],
                        // area: ['91.91%', '72.16%'],
                        content: '../gys/addGys.html?companyId=' + that.companyId + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                that.getGysList()
                            }, 10)
                        }
                    });
                },
                // 自定义表格数据合计的计算和显示
                getSummaries(param) {
                    var columns = param.columns
                    var data = param.data
                    var sums = [];
                    var that = this
                    setTimeout(function () {
                        that.$refs.clmxTableRef.doLayout()
                    }, 10)
                    for (var i = 0; i < columns.length; i++) {
                        if (i == 7) {
                            sums[7] = '总价';
                        } else {
                            sums[i] = ''
                        }
                        var netwrarr = []
                        var taxesarr = []
                        var priceTaxarr = []
                        var netwrcont = 0
                        var taxescont = 0
                        var priceTaxcont = 0
                        for (var j = 0; j < data.length; j++) {
                            netwrarr.push(data[j].netwr)
                            taxesarr.push(data[j].taxes)
                            priceTaxarr.push(data[j].priceTax)
                        }
                        for (var j = 0; j < netwrarr.length; j++) {
                            netwrcont += parseFloat(netwrarr[j])
                        }
                        for (var j = 0; j < taxesarr.length; j++) {
                            taxescont += parseFloat(taxesarr[j])
                        }
                        for (var j = 0; j < priceTaxarr.length; j++) {
                            priceTaxcont += parseFloat(priceTaxarr[j])
                        }
                        sums[8] = netwrcont.toFixed(2);
                        sums[9] = taxescont.toFixed(2);
                        sums[10] = priceTaxcont.toFixed(2);
                        that.netwrcont = netwrcont.toFixed(2)
                        that.taxescont = taxescont.toFixed(2)
                        that.priceTaxcont = priceTaxcont.toFixed(2)
                    }
                    return sums;
                },
                cancels() {
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                },
                confirms() {
                    var that = this
                    if (!this.basicinfo.suppilerId || this.basicinfo.suppilerId == 0) {
                        this.$message({
                            message: '请选择供应商',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.basicinfo.title.length == 0) {
                        this.$message({
                            message: '请输入合同标题',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.fileList.length == 0) {
                        this.$message({
                            message: '请上传附件',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.clmxList.length == 0) {
                        this.$message({
                            message: '请添加设备明细',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }

                    for (var j = 0; j < this.clmxList.length; j++) {
                        var clmxItem = this.clmxList[j];
                        if (parseInt(clmxItem.price) === 0) {
                            this.$message({
                                message: '设备明细的采购单价不能为0',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }

                    }

                    var uploadFile = []
                    for (var i = 0; i < this.fileList.length; i++) {
                        uploadFile.push(this.fileList[i].fileid + ',' + this.fileList[i].filename + ',' + this.fileList[i].userName + ',' + this.fileList[i].uploadTime)
                    }
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        url: this.baseUrl + '/WebProxy/Proxy?url=DevicePurchaseContract/AddContract',
                        data: {
                            param: JSON.stringify({
                                netwrCount: that.netwrcont,
                                taxesCount: that.taxescont,
                                allPriceTax: that.priceTaxcont,
                                uploadFile: uploadFile.join('|'),
                                suppilerId: that.basicinfo.suppilerId,
                                title: that.basicinfo.title,
                                remark: that.basicinfo.remark,
                                contractDetail: that.clmxList
                            })
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (res.Code != 0) {
                                that.$message({
                                    message: res.Msg ? res.Msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: '已提交',
                                type: 'success'
                            });
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            }, 500)
                        }
                    });
                },

                countchange(row) {
                    // quantity 采购数量
                    // price 单价
                    // taxRate 税率
                    // netwr 不含税金额
                    // taxes 税金
                    // priceTax 价税合计
                    // 直接进行小数点限制
                    // 对数量进行整数处理 解决小数点的数量的问题
                    if (row.taxRate == "") {
                        row.taxRate = 0;
                    }

                    if (row.taxRate > 20) {
                        row.taxRate = 20
                    }
                    if (row.taxRate < 0) {
                        row.taxRate = 0
                    }
                    row.taxRate = parseFloat(row.taxRate).toFixed(2);

                    if (row.price == "") {
                        row.price = 0;
                    }
                    if (row.price < 0) {
                        row.price = 0
                    }
                    row.price = parseFloat(row.price).toFixed(2);

                    if (row.quantity < 1) {
                        row.quantity = 1
                    }
                    row.quantity = parseInt(row.quantity);
                    row.priceTax = (row.quantity * row.price).toFixed(2)
                    row.taxes = (row.quantity * row.price * row.taxRate / 100).toFixed(2)
                    row.netwr = (row.priceTax - row.taxes).toFixed(2)
                },
                prevewImg(filename, urls) {
                    if (getFileType(filename) == 'IMG') {
                        this.previewList = [urls];
                        setTimeout(function () {
                            var viewer = new Viewer(document.getElementById('jq22'), {
                                hide: function () {
                                    viewer.destroy();
                                }
                            });
                            viewer.show();
                        }, 10);
                        return false
                    }
                    if (getFileType(filename) == 'PDF') {
                        parent.layer.open({
                            type: 2,
                            title: 'pdf预览',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['98%', '98%'],
                            content: '../pdf/web/viewer.html?file=' + encodeURIComponent(urls),
                            end: function () { }
                        });
                        return false
                    }
                    publicdownFile(filename, urls)
                },
                downImg(filename, urls) {
                    publicdownFile(filename, urls)
                },
                removeImg(arr, index, types) {
                    var title = '此操作将永久删除该文件, 是否继续?'
                    if (types == 1) {
                        title = '此操作将永久删除该数据, 是否继续?'
                    }
                    this.$confirm(title, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        arr.splice(index, 1)
                    }).catch(function () {
                    });
                },
                httprequest(file) {
                    var that = this
                    xLoading(true, '正在上传')
                    var formData = new FormData();
                    formData.append('files', file.file);
                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
                        data: formData,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                                return false;
                            }
                            var newobj = {
                                fileid: res.data.fileId,
                                filename: res.data.fileName,
                                fileurl: res.data.ossUrl,
                                uploadTime: res.data.uploadTime,
                                userName: res.data.userName
                            }
                            that.fileList.push(newobj)
                        }
                    });
                },
                chioceClmx() {
                    var that = this
                    var selectArr = []
                    for (var i = 0; i < this.clmxList.length; i++) {
                        selectArr.push({
                            Id: this.clmxList[i].DeviceId,
                        })
                    }
                    parent.$('#publicValue').val('')
                    parent.layer.open({
                        type: 2,
                        title: '选择材料和规格',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['52.08%', '64.81%'],
                        // area: ['91.91%', '72.16%'],
                        content: '/ApsPublic/publicList/sbmxList.html?projectId=' + that.projectId + '&selectArr=' + encodeURIComponent(JSON.stringify(selectArr)) + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                if (parent.$('#publicValue').val()) {
                                    var newList = JSON.parse(parent.$('#publicValue').val())
                                    var newArr = []
                                    for (var i = 0; i < newList.length; i++) {
                                        newArr.push({
                                            quantity: 1,
                                            price: 0,
                                            taxRate: 0,
                                            netwr: 0,
                                            taxes: 0,
                                            priceTax: 0,
                                            addTimeStock: newList[i].FreeCount + newList[i].InUseCount,
                                            deviceId: newList[i].Id,
                                            deviceName: newList[i].Name,
                                            deviceModel: newList[i].Model,
                                            deviceUnit: newList[i].Unit,
                                        })
                                    }
                                    that.clmxList = that.clmxList.concat(newArr)
                                    that.$refs.clmxTableRef.doLayout()
                                }
                            }, 10)
                        }
                    });
                },
                getGysList() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/GetPartnerList?typeId=1',
                        data: JSON.stringify({
                            companyId: that.companyId,
                            page: 1,
                            pageSize: 99999
                        }),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.gysList = res.data
                        }
                    });
                }
            },
            mounted() {
                this.showApp = true;
                this.projectId = getQuerys('projectId')
                this.companyId = getQuerys('companyId')
                this.getGysList()
            }
        });
    </script>
</body>
<style>
    .content_box {
        padding: 2.06vh 2.27vw 3.09vh;
        height: calc(100% - 70px);
        overflow: auto;
    }

    .cell_cont {
        padding: 3.09vh 2.27vw;
        border: 1px solid #EBEBEB;
        height: calc(100% - 52px);
    }

    .cell_box {
        float: left;
    }

    .cell_title {
        display: flex;
        align-items: center;
        padding: 10px 0;
        height: 52px;
    }

    .cell_but {
        padding-left: 10px;
    }

    .form_box {
        display: flex;
        width: 100%;
        margin-top: 20px;
    }

    .form_name {
        line-height: 32px;
        width: 104px;
        min-width: 104px;
        padding-right: 10px;
        text-align: right;
    }

    .form_cont {
        display: flex;
        align-items: center;
        line-height: 1;
        flex: 1;
        flex-wrap: wrap;
    }

    .border_table_box {
        height: 100%;
    }

    .table_input .el-date-editor.el-input,
    .table_input .el-date-editor.el-input__inner {
        width: 100%;
    }

    .table_nums .el-input-number {
        width: 100%;
        height: 24px;
        line-height: 24px;
    }

    .table_nums .el-input-number__decrease,
    .table_nums .el-input-number__increase {
        height: 22px;
        width: 24px;
        background: #fff;
    }

    .table_nums .el-input__inner {
        height: 24px;
        text-align: center;
        line-height: 24px;
        padding: 0 24px;
    }
</style>

</html>